<template>
	<view>
		<u-navbar class="font-weight-bold" title="购物车" placeholder>
			<view slot="left"></view>
		</u-navbar>
		
		<view class="flex justify-between m-3 px-2">
			<text class="font-weight-bold">购物车（共{{goodsCount}}件宝贝）</text>
			<view @click="adm = !adm">{{adm? '退出管理': '管理'}}</view>
		</view>
		
		<template v-if="list.length" class="py-5">
			<view class="mx-2"  style="border-radius: 20rpx;">
			    <block v-for="(item,index) in list" :key="index">
			    	<view class="flex align-center bg-white p-2 ">
			    		<u-image :src="item.checked?'/static/select.png':'/static/noselect.png'" width="18" height="18" @click="selectItem(index)"></u-image>
			    		<view class="ml-2">
			    			<u-image :src="item.image" width="90" height="90" radius="10"></u-image>
			    		</view>
			    		<view class="ml-2" style="width: 100%; height: 100%;">
			    			<u-text class="pb-2" :text="item.goods_name" lines="2"></u-text>
							
			    			<view class="mt-5 flex align-center justify-between ">
								<commonPrice :price="item.price" newPrice="#f85311" monthlySaleStyle="#c6c6c6"></commonPrice>
			    			    <view style="background-color: #eeeeee; border-radius: 22rpx;">
			    			    	<u-number-box v-model="item.goods_num" @change="valChange($event,item)">
							    		<view slot="minus" class="minus" >
							    	        <u-icon name="minus" size="12"></u-icon>
							    	    </view>
							    		<text slot="input" style="width: 50rpx;text-align: center;" class="input" >
							    		   {{item.goods_num}}
							    		</text>
							    	    <view slot="plus" class="plus" >
							    	        <u-icon name="plus" size="12"></u-icon>
							    	    </view>
							    	</u-number-box>
			    			    </view>	
			    			</view>
			    		</view>
			    	</view>
			    </block>
			</view>
			
			<view class="" style="height: 100rpx;"></view>
			<!-- 管理中状态 -->
			<template v-if="adm">
				<view  class="fixed-bottom bg-white flex align-center px-3 justify-between" style="height: 100rpx;">
					<!-- 左侧 -->
					<view class="flex align-center">
						<u-image :src="checkedAll?'/static/select.png':'/static/noselect.png'" width="18" height="18" @click="doSelectAll"></u-image>
						<view class="ml-2 font-sm">全选</view>
					</view>
					<!-- 删除按钮 -->
					<view class="flex align-center">
						<view class="sunmint" @click="removeBtn">
							删除
						</view>
					</view>
				</view>
			</template>
			<!-- 结算商品底部状态 -->
			<template v-else>
				<view  class="fixed-bottom bg-white flex align-center px-3 justify-between" style="height: 100rpx;">
					<!-- 左侧勾选 -->
					<view class="flex align-center">
						<u-image :src="checkedAll?'/static/select.png':'/static/noselect.png'" width="18" height="18" @click="doSelectAll"></u-image>
						<view class="ml-2 font-sm">全选</view>
					</view>
					<!-- 右侧总价与结算 -->
					<view class="flex align-center justify-between">
						<view class="flex align-center justify-between" style="width: 260rpx;">
							<view class="text-main font-28">合计：</view>
							<view class="flex flex-column font-sm text-right mr-2" >
                                <view class="font-24" style="color: #fa7f39;">
                                	￥
                                	<text class="font-md">{{totalPrice}}</text>
                                </view>
								<!-- TODO 判断选中的商品是否有运费 -->
								<text class="font-24" v-if="totalPrice > 0">不含运费</text>
							</view>
						</view>
						<view class="sunmint" @click="submint">
							去结算({{selectedList.length}})
						</view>
					</view>
				</view>
			</template>
		</template>
		<template v-else>
			<u-empty mode="car" marginTop="150"></u-empty>
		</template>
		
		<!-- 删除弹出框 -->
		<u-modal class="flex justify-center" :show="show" :showCancelButton="true" @cancel="cancel" @confirm="doDelGoods" >
		    <view class="slot-content flex justify-center align-center " style="height: 160rpx;">
		    	确定删除该{{selectedList.length}}项商品?
		    </view>
		</u-modal>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapActions,mapMutations} from "vuex"
	export default {
		data() {
			return {
				isEdit: false,
				path:'',
				// 是否是管理状态
				adm: false,
				// 删除弹出框
				show: false,
				user_info:{
					'invite_code':''
				}
			}
		},
		computed: {
			...mapState({
				list:state=>state.cart.list,
				selectedList:state=>state.cart.selectedList
			}),
			...mapGetters([
				'checkedAll',
				'totalPrice',
				'disableSelectAll'
			]),
			goodsCount() {
				return this.list.length
			}
		},
		onLoad(options) {
			let invite_code = '';
			if(options && options.invite_code){
				invite_code = options.invite_code
			}
			//获取来源
			if(options && options.scene){
				//params转 obj  字符串参数  a=123&b=456 转 {a:"123",b:"456"}
				var query = this.getRequestParameters(decodeURIComponent(options.scene))
				invite_code = query.invite_code
			}
			if(invite_code){
				uni.setStorageSync('invite_code', invite_code)
			}
		},
		onShow() {
			this.adm = false
			uni.hideLoading()
			if(uni.getStorageSync('token')){
				this.getData()
				this.getDefultAddress()
			}
			let user_info = uni.getStorageSync('userinfo')
			if(user_info){
				this.user_info = user_info
			}
		},
		//转发给朋友
		onShareAppMessage(res){
			return {
				title:'五金',
				path:'pages/cart/index?invite_code='+this.user_info.invite_code
			}
		},
		//分享朋友圈
		onShareTimeline(res){
			return {
				title:'五金',
				path:'pages/cart/index',
				query:'invite_code='+this.user_info.invite_code,
			}
		},
		methods: {
			...mapActions([
				'doSelectAll'
			]),
			...mapMutations([
				'selectItem',
				'initCartList',
				'unSelectAll'
			]),
			getRequestParameters(params="") {
                let theRequest = new Object();
                if (params != undefined) {
                    let strs = params.split("&");
                    for (let i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            },
			getData(){
				this.$api.cartlist().then(res=>{
					if(res.code === 1){
						this.initCartList(res.data.lists)
						uni.setNavigationBarTitle({
							title: `购物车(${res.data.total_num})`
						})
					}
					
				})
			},
			getDefultAddress(){
				this.$api.addresslists().then(res=>{
					if(res.code === 1){
						if(res.data){
							this.path = res.data[0]
						}
					}
				})
			},
			valChange(e,item) {
				this.$api.cartchange({
					cart_id:item.cart_id,
					goods_num:e.value
				}).then(res=>{
					if(res.code === 1){
						item.goods_num = e.value
					}
					
				})
				
			},
			// 删除
			doDelGoods(){
				this.$api.cartdel({
					cart_id: this.selectedList.join()
				}).then(res=>{
					if(res.code === 1){
						uni.showToast({
							title: res.msg,
							icon:"none"
						});
						this.show = false
						this.getData()
					}
				})
				
			},
			submint(){
				if(!this.path){
					return uni.showModal({
						title: '提示',
						content: '无收货地址,请创建收货地址',
						showCancel: true,
						cancelText: '取消',
						confirmText: '创建',
						success: res => {
							if(res.confirm){
								uni.$u.route('pages/user/path')
							}
						}
						
					});
				}
				if(this.selectedList.length === 0){
					return uni.showToast({
						title:'请选择要结算的商品',
						icon:'none'
					})
				}
				
				uni.$u.route('pages/cart/cartconfirm',{
					detail:JSON.stringify(this.selectedList) 
				})
			},
			removeBtn() {
				if (this.selectedList.length <= 0) {
					return uni.showToast({
						title: '请选择要删除的商品',
						icon: 'none'
					})
				}
				this.show = true
			},
			// 取消
			cancel() {
				this.show = false
			}
			

		}
	}
</script>

<style lang="scss">
	.sunmint {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: #4dd971;
		color: white;
		border-radius: 10rpx;
		width: 190rpx;
		height: 74rpx;
		margin-left: 10rpx;
		font-size: 28rpx;
	}
	.dele{
		width: 188rpx;
		height: 74rpx;
		background: linear-gradient(181deg, #FF5E5E 0%, #F12E2E 100%);
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}
	.addcollect{
		width: 188rpx;
		height: 74rpx;
		background: linear-gradient(181deg, #FF8839 0%, #FF6702 100%);
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}
	.minus {
			width: 44rpx;
			height: 44rpx;
			border-width: 1rpx;
			border-color: #e5e5e5;
			border-style: solid;
			border-top-left-radius: 100rpx;
			border-top-right-radius: 100rpx;
			border-bottom-left-radius: 100rpx;
			border-bottom-right-radius: 100rpx;
			@include flex;
			justify-content: center;
			align-items: center;
		}
	
		.plus {
			width: 44rpx;
			height: 44rpx;
			background-color: #e5e5e5;
			border-radius: 50%;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;
		}
</style>
